<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>患者端 – 可穿戴传感个性化康复训练系统</title>
    <style>
        body{font-family:Arial,sans-serif;background:#f5f7fa;color:#333;margin:0;padding:0;}
        header{background:#2c3e50;color:#fff;padding:20px;text-align:center;}
        .container{max-width:1200px;margin:auto;padding:20px;}
        .card{background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);margin:20px 0;padding:20px;}
        .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
        .btn{background:#1abc9c;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;}
        .btn:hover{background:#16a085;}
        a.link{color:#1abc9c;text-decoration:none;}
        a.link:hover{text-decoration:underline;}
        canvas{width:100%;height:auto;background:#fff;}
        .warning{border-left:4px solid #e74c3c;background:#fdecea;padding:15px;margin-top:20px;}
        .warning h3{margin-top:0;color:#c0392b;}
        .exercise-list li{margin-bottom:8px;}
        .back-btn{margin-top:30px;text-align:center;}
    </style>
</head>
<body>

<header>
    <h1>患者端</h1>
    <p>可视化健康数据 + 中医养生运动示范</p>
</header>

<div class="container">

    <!-- 1. 睡眠时间可视化 -->
    <section class="card">
        <h2>睡眠时间可视化</h2>
        <canvas id="sleepChart" width="800" height="300"></canvas>
        <p id="sleepInfo">加载中…</p>
    </section>

    <!-- 2. 中医养生运动（八段锦） -->
    <section class="card">
        <h2>中医养生运动 – 八段锦示例</h2>
        <p>八段锦是流传千年的传统养生功法，八个动作对应不同经络调理，适合康复患者日常练习。</p>
        <ol class="exercise-list">
            <li>① <strong>双手托天理三焦</strong>：站立，两手从两侧上托至头顶，掌心向上，随后缓慢下放。</li>
            <li>② <strong>左右开弓似射雕</strong>：左脚跨出，身体下蹲成马步，双手交叉模拟拉弓射箭。</li>
            <li>③ <strong>调理脾胃须单举</strong>：右手举起、左手按压，交替进行，配合呼吸。</li>
            <li>④ <strong>五劳七伤往后瞧</strong>：双手贴腿，头部左右转动，帮助颈椎放松。</li>
            <li>⑤ <strong>摇头摆尾去心火</strong>：站立下蹲，身体左右倾倒，舒展胸背。</li>
            <li>⑥ <strong>两手攀足固肾腰</strong>：双手上举下按，沿脚踝攀缘起身，强化腰部。</li>
            <li>⑦ <strong>攒拳怒目增气力</strong>：握拳怒目，配合呼气，提升气力。</li>
            <li>⑧ <strong>背后七颠百病消</strong>：脚跟上提，身体轻微颤动，促进全身血液循环。</li>
        </ol>
        <p>练习要点：动作连贯、呼吸自然、保持身心放松。建议每日练习 5–10 分钟，可配合本系统的实时心率监测。</p>
    </section>

    <!-- 3. 运动安全警示 -->
    <section class="card warning">
        <h3>运动安全警示</h3>
        <p>为防止因运动强度不当导致不适或伤害，请务必遵守以下原则：</p>
        <ul>
            <li>① <strong>循序渐进</strong>：首次或恢复训练时，先从低强度、短时长（如 5–10 分钟）开始，逐步增加至每日 30 分钟左右。</li>
            <li>② <strong>倾听身体信号</strong>：出现以下任意症状应立即停止运动并就医：恶心呕吐、头晕头痛、胸部不适、极度疲惫、四肢无力、呼吸急促、关节疼痛等。</li>
            <li>③ <strong>保持适度水分与电解质</strong>：运动期间每 15 分钟补充适量清水，避免脱水导致肌肉损伤。</li>
            <li>④ <strong>合理安排休息</strong>：每周至少安排 1–2 天完全休息，防止连续高强度训练导致肌肉过度疲劳。</li>
            <li>⑤ <strong>专业指导</strong>：在制定个人运动方案前，请先接受康复医师或运动康复师的评估，确保强度与自身体能匹配。</li>
        </ul>
        <p>若出现上述警示信号，请立即停止训练，记录症状并联系您的康复医师或就近医院。</p>
    </section>

    <!-- 4. B站中医养生操视频链接 -->
    <section class="card">
        <h2>中医养生操视频（Bilibili）</h2>
        <p>以下视频均为公开的中医养生操教学，适合在家自行练习。</p>
        <ul>
            <li><a class="link" href="https://www.bilibili.com/video/BV1mx421277Q" target="_blank">中医养生操 – 基础篇</a></li>
            <li><a class="link" href="https://www.bilibili.com/video/BV1qXScYcEVq/" target="_blank">古法健身操（25 分钟）</a></li>
            <li><a class="link" href="https://www.bilibili.com/video/BV14C4y1w7DW/" target="_blank">中医视频音频合集 – 零基础入门</a></li>
        </ul>
        <p>点击链接即可在 B 站观看完整教学，配合本页面的可视化数据一起使用，可实时监测练习过程中的心率、血氧等指标。</p>
    </section>

    <!-- 5. 实时心率/血氧示例 -->
    <section class="card">
        <h2>实时心率/血氧示例</h2>
        <button class="btn" id="dataBtn">获取实时数据</button>
        <pre id="dataBox">-- 未获取 --</pre>
    </section>

    <!-- 6. 返回首页按钮 -->
    <div class="back-btn">
        <a href="index.html" class="btn">返回首页</a>
    </div>

</div>

<script>
/* ---------- 睡眠曲线绘制 ---------- */
function drawSleepChart(){
    const canvas=document.getElementById('sleepChart');
    const ctx=canvas.getContext('2d');
    const w=canvas.width, h=canvas.height;
    ctx.fillStyle='#f9f9f9';
    ctx.fillRect(0,0,w,h);
    ctx.strokeStyle='#bbb';
    ctx.beginPath();ctx.moveTo(40,h-30);ctx.lineTo(w-20,h-30);ctx.stroke();
    ctx.beginPath();ctx.moveTo(40,20);ctx.lineTo(40,h-30);ctx.stroke();
    const points=[];
    for(let i=0;i<=48;i++){
        const hour=i*0.5;
        const depth=Math.max(0,Math.sin((hour-22)/24*Math.PI*2)*80+20+(Math.random()*10-5));
        points.push({x:40+(w-60)*(hour/24), y:h-30-(h-50)*(depth/100)});
    }
    ctx.strokeStyle='#1abc9c';
    ctx.lineWidth=2;
    ctx.beginPath();
    points.forEach((p,i)=>{i===0?ctx.moveTo(p.x,p.y):ctx.lineTo(p.x,p.y);});
    ctx.stroke();
    ctx.fillStyle='#333';
    ctx.font='12px Arial';
    for(let hrt=0;hrt<=24;hrt+=4){
        const x=40+(w-60)*(hrt/24);
        ctx.fillText(hrt+'h',x-10,h-10);
        ctx.beginPath();ctx.moveTo(x,h-30);ctx.lineTo(x,h-25);ctx.stroke();
    }
}
drawSleepChart();

/* ---------- 实时数据按钮 ---------- */
document.getElementById('dataBtn').addEventListener('click',()=>{
    const box=document.getElementById('dataBox');
    box.textContent='正在读取…';
    setTimeout(()=>{
        const hr=(60+Math.random()*20).toFixed(0);
        const spo2=(95+Math.random()*5).toFixed(0);
        box.textContent=`心率：${hr} bpm\n血氧：${spo2}%`;
    },1200);
});
</script>

</body>
</html>
